<%@page import="org.proddevplm.constants.UserConstants"%>
<%@page import="org.proddevplm.dao.data.Roles"%>
<%@page import="org.proddevplm.dao.data.Project"%>
<%@page import="org.proddevplm.dao.data.RelationMatrix"%>
<%@page import="org.proddevplm.dao.data.dia.Diagram"%>
<%@page import="java.util.*"%>
<%@page import="org.proddevplm.dao.data.User"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.dataAccess.constants.DataAccessConstants" %>

<script src="javascript/dia/raphael-min.js" type="text/javascript"></script>
<script src="javascript/dia/joint.min.js" type="text/javascript"></script>
<script src="javascript/dia/joint.dia.min.js" type="text/javascript"></script>
<script src="javascript/dia/joint.dia.erd.min.js" type="text/javascript"></script>
<script src="javascript/dia/joint.dia.serializer.min.js" type="text/javascript"></script>


<head>
	<link type="text/css" href="style/proddevplm.css" rel="stylesheet" />
</head>

<script type="text/javascript">
	
	$(function(){
		$( "button" ).button();
		$("#activityStartDate").datepicker();
		$("#activityEndDate").datepicker();
		$(".uselessDetails").hide();
		$("#updateDia").hide();
	});
	
	var saveData = new Object();

	var joints = [];
	var elements = new Object();
	var elementMetadata = new Object();
	var labeledJoint = false;
    var dashedJoint = false;

	var paper;
	var lastClicked = null;
	var first = null;
	var joining = false;
	
	function parseSavedData(savedData) {
	    saveData = $.evalJSON(savedData);
	    for (var i in saveData) {
	        var so = saveData[i];
	        if (so == null) {
	            console.log(so);
	        } else if (so.type > 0) {
	            var element = addSquare(so.x, so.y, false, so.identifier, so.type, so.label,so);
	        } else if (so.type == 0) {
	            console.log("0" + so.from + " " + so.to+" "+so.label);
	            var sdFrom = saveData["" + so.from];
	            var sdTo = saveData["" + so.to];

	            var from = elements["" + so.from];
	            var to = elements["" + so.to];



	            if (sdFrom != null && sdTo != null) {
	                if (so.label == null) {
	                    join(from, to, false, so.identifier, so.dashed);
	                } else {
	                    labelJoin(from, to, false, so.identifier, so.label);
	                }
	            }
	        }
	    }
	}

	function addLabeledJoint() {
	    labeledJoint = true;
	    joining = true;
	}

    function addDashedJoint() {
	    dashedJoint = true;
	    joining = true;
	}

	function callJSfunction(data) {
	    var a = elementMetadata["" + data.uuid];
	    if (a != null) {
	        document.getElementById("identifier").value = a.identifier;
	        a.x = data.wrapper.attr("x");
	        a.y = data.wrapper.attr("y");
	        document.getElementById("x").value = a.x;
	        document.getElementById("y").value = a.y;
	        document.getElementById("label").value = a.label;
            document.getElementById("activityName").value = a.an;
            document.getElementById("activityStartDate").value = a.asd;
            document.getElementById("activityEndDate").value = a.aed;
            document.getElementById("activityResponsible").value = a.ar;
            document.getElementById("activityApprover").value = a.aa;
            document.getElementById("selDesignPhase").value = a.sdp;
            document.getElementById("filePath").value = a.fp;
            
            if((a.type==1)||(a.type==2)){
            	$("#linkDiv").hide();
            	$("#activity").show();
            	$("#timeline").show();
            	$("#responsible").show();
            	$("#approver").show();
            	$("#devPhase").show();
            	$("#toolDiv").show();
            }else {
            	$("#activity").hide();
            	$("#timeline").hide();
            	$("#responsible").hide();
            	$("#approver").hide();
            	$("#devPhase").hide();
            	$("#toolDiv").hide();
            	$("#linkDiv").show();
            }
            
            //3 randuri adaugate
            document.getElementById("selTool").value = a.st;
            //var select=document.getElementById("selTool");
            //select.options[select.selectedIndex].text = a.st;
	        elementMetadata["" + data.uuid] = a;
	    } else {
	        return;
	    }


	    if (lastClicked != null && lastClicked.unhighlight != null)
	        lastClicked.unhighlight();
	    lastClicked = data;

	    if (lastClicked.highlight != null)
	        lastClicked.highlight();

	    if (joining == true) {
	        if (first == null) {
	            first = lastClicked;
	        } else {
	            var j;

                if (labeledJoint == false && dashedJoint == false) {
	                j = join(first, lastClicked, true, null, false);
	            } else if (dashedJoint == true) {
	                j = join(first, lastClicked, true, null, true);
	            } else {
                    
                    j = labelJoin(first, lastClicked, true, null);
                }

	            joints.push(j);
	            first = null;
	            joining = false;
	        }
	    }

	}

	function join(from, to, save, identifier, dashed) {

        var j;
        if (dashed) {
            j = new Joint(from, to, erd.dashed);
        } else {
            j = new Joint(from, to);
        }

	    var objectDia = new Object();
	    if (identifier == null) {
	        objectDia.identifier = randomUUID();
	    } else {
	        objectDia.identifier = identifier;
	    }

	    objectDia.type = 0;
	    objectDia.from = from.uuid;
	    objectDia.to = to.uuid;
        if (dashed!=null && dashed == true) {
            objectDia.dashed = 1;
        } else {
            objectDia.dashed = 0;
        }

	    saveData["" + objectDia.identifier] = objectDia;
        dashedJoint = false;

	    return j;
	}

	function labelJoin(from, to, save, identifier, jointLabel) {
	    if (jointLabel == null) {
	        jointLabel = prompt("Label");
	    }
	    var j = new Joint(from, to, {label: jointLabel});

	    var objectDia = new Object();
	    if (identifier == null) {
	        objectDia.identifier = randomUUID();
	    } else {
	        objectDia.identifier = identifier;
	    }

	    objectDia.type = 0;
	    objectDia.from = from.uuid;
	    objectDia.to = to.uuid;
	    objectDia.label = jointLabel;

	    saveData["" + objectDia.identifier] = objectDia;
	    labeledJoint = false;

	    return j;
	}


	function addElement(elno) {
	    addSquare(350, 350, true, null, elno, null, null);
	}

	function addSquare(tox, toy, save, identifier, squareType, squareLabel,so) {
	    var square;
	    if (squareLabel == null) {
	        squareLabel = "Label";
	    }

	    if (squareType == 1) {
	    	square = erd.Entity.create({
	            rect: { x: tox, y: toy, width: 120, height: 60 },
	            label: squareLabel
	        });
	    } else if (squareType == 2) {
	        square = erd.Relationship.create({
	            rect: { x: tox, y: toy, width: 60, height: 60 },
	            label: squareLabel
	        });
	    } else if (squareType == 3) {
	    	square = erd.Database.create({
	            rect: { x: tox, y: toy, width: 80, height: 80 },
	            label: squareLabel
	        });
	    } else if (squareType == 4) {
	    	square = erd.Documents.create({
	            rect: { x: tox, y: toy, width: 80, height: 80 },
	            label: squareLabel
	        });
	    }

	    var objectDia = new Object();
	    if (identifier == null) {
	        objectDia.identifier = randomUUID();
	    } else {
	        objectDia.identifier = identifier;
	    }

	    square.uuid = objectDia.identifier;
	    objectDia.type = squareType;
	    objectDia.label = squareLabel;
	    objectDia.x = tox;
	    objectDia.y = toy;

        if (so)
        {
            objectDia.an = so.an;
            objectDia.asd = so.asd;
            objectDia.aed = so.aed;
            objectDia.ar = so.ar;
            objectDia.aa = so.aa;
            objectDia.sdp = so.sdp;
            objectDia.fp = so.fp;
            //2 randuri
            objectDia.stHidden = so.stHidden;
            objectDia.st = so.st;
        }else{
        	objectDia.an = "";
            objectDia.asd = "";
            objectDia.aed = "";
          
            document.getElementById('activityResponsible').selectedIndex = 0;
            document.getElementById('activityApprover').selectedIndex = 0;
            document.getElementById('selDesignPhase').selectedIndex = 0;
            document.getElementById('selTool').selectedIndex = 0;
        }

	    elementMetadata["" + square.uuid] = objectDia;
	    saveData["" + objectDia.identifier] = objectDia;
	    elements["" + square.uuid] = square;

	    return square;
	}

	function addJoint() {
	    joining = true;
	}

	function update() {
	    console.log(lastClicked);
	}

	function remove() {
		var a = elementMetadata["" + lastClicked.uuid];
		var activityName = a.an;
		var arguments = "activityName="+activityName;
		ajaxCall("activityManager", "4", arguments, null);
		
		saveData[lastClicked.uuid] = null;
	    elementMetadata[lastClicked.uuid] = null;
	    recreatePage();
	    
	}

	function recreatePage() {
	    Joint.resetPaper();
	    var a = $.toJSON(saveData);
	    
	    parseSavedData($.toJSON(saveData));
	}

	function cleanup() {
	    var saveDataClean = new Object();

        for(var key in saveData) {
            if (saveData[key]!=null) {
                saveDataClean[key] = saveData[key];
            }
        }

        saveData = saveDataClean;

	}

	function saveDia(){
       	cleanup();
		var a = $.toJSON(saveData);
		ajaxDataCall("diaManager", "0", "",{diaEncoding : ""+a+""}, null);
	}
	
	function updateDia(){
		cleanup();
		var a = $.toJSON(saveData);
		ajaxDataCall("diaManager", "2", "",{diaEncoding : ""+a+""}, null);
	}
</script>

<script type="text/javascript">

	var request = "";
	var page = "";
	var pageName = "";
	
    var erd = Joint.dia.erd;
    paper = Joint.paper("paper", 1500, 1500);
    
    var arguments = "productId=<%=session.getAttribute("productId")%>";
    ajaxCall("diaManager", "1", arguments, loadDiagram);
    
    function loadDiagram(value) {
 
    	if(parseInt(value)!=1){
    		$("#saveDia").hide();
    		$("#updateDia").show();
    		parseSavedData(value);	
    	}
    		
    }
   
    function saveObjectData() {
          if (lastClicked != null) {
                var a = elementMetadata["" + lastClicked.uuid];
                if (a != null) {
                    a.label = document.getElementById("label").value;
                    a.an = document.getElementById("activityName").value;
                    a.asd = document.getElementById("activityStartDate").value;
                    a.aed = document.getElementById("activityEndDate").value;
                    a.ar = document.getElementById("activityResponsible").value;
                    a.aa = document.getElementById("activityApprover").value;
                    a.sdp = document.getElementById("selDesignPhase").value;
                    a.fp = document.getElementById("filePathReal").value;
                    //3randuri
                    a.stHidden = document.getElementById("selTool").value;
                    var select = document.getElementById("selTool");
                    a.st = select.options[select.selectedIndex].text;
                    elementMetadata["" + lastClicked.uuid] = a;
                    recreatePage();
                }
            }
    }

    $("#label").keyup(function(event) {
        if (event.keyCode == 13) {
            saveObjectData();
        }
    });

    $("#activityName").keyup(function(event) {
        if (event.keyCode == 13) {
            saveObjectData();
        }
    });

    $("#activityStartDate").change(function(event) {        
        saveObjectData();
    });

    $("#activityEndDate").change(function(event) {        
        saveObjectData();
    });

    $("#activityResponsible").change(function(event) {
        saveObjectData();
    });

    $("#activityApprover").change(function(event) {
        saveObjectData();
    });

    $("#selDesignPhase").change(function(event) {        
        saveObjectData();
    });
    
    $("#selTool").change(function(event){
    	saveObjectData();
    });
    
    $("#filePath").change(function(event){
    	saveObjectData();
    })

	function populateTool(){
		var aux = document.getElementById("selTool").value;
		var array = aux.split(",");
		request = array[0];
		page = array[1];
		var select = document.getElementById("selTool");
		pageName = select.options[select.selectedIndex].text;
	}
	
	function goToActivities(){
		document.forms['goToForm'].submit();
		//ajaxCall("toolsManager", "17", null, change)		
	}
	
	function getPath(name){
		
		var index = name.indexOf("//", 0);
		if(index!=-1){
			var newName = name.substr(index+2);
		}
		
		$("#filePathReal").val(newName);
	}
	
	/*function change(data){
		$("#"+data).click();
		//need a solution to remove the alert. It does not work without stopping while alert appears
		
		alert(pageName+' page selected');
		$("#toolsLeftPane").css('display','none');
		$("#toolsRightPane").css('width', '100%');
		loadPageWithReq(request, page);
		//setTimeout(null, 3000);
		
		//sleep(1000);
		//$("#toolsAccordion").css('width','2%');
		
		
	}
	
	function getFilePath(){
		var console = document.getElementById('linkToResource').value;
		alert(console);
		var data = '';
		if(document.getElementById('linkToResource').files){
			data += document.getElementById('linkToResource').files.item(0).getAsDataURL();
		}
		$('#filePath').val(data);
	}
	*/
	
</script>

<%
	List usersOnProject = (List)session.getAttribute("usersOnProject");
	List<Roles> rolesOnProject = (List)session.getAttribute("rolesOnProject");
	String currentRole = "";
	List relMatrixUser = (List)session.getAttribute("relMatrixUser");
	int projectId = (Integer)session.getAttribute("projectId");
	for (int index=0; index<relMatrixUser.size(); index++){
		RelationMatrix rm = (RelationMatrix)relMatrixUser.get(index);
		Project userProject = rm.getProject();
		if(userProject.getId()==projectId){
			Roles userRole = rm.getRole();
			currentRole = userRole.getRole();
		}
	}
	User user = (User)session.getAttribute(UserConstants.USER);
	String userType = user.getType();
%>

<div id="wholecanvas" style="width:auto">
    <div id="leftPane" style="float:left; width:17%;">
    <%if(currentRole.equals("Project Manager")){ %>
        <div id="tools" style="height:240px; overflow:auto; margin-bottom:10px; ">
        	<div style="text-align:center; font-family:verdana; font-weight:bold; background-color:#b8b8b8">
        		Graphic tools
        	</div>

        	<div style="margin-top:20px; font-size:xx-small;">
        		<div style="float:left; margin-left:20px;">
        			<a href="#" onclick="addElement(1)"><img src="/proddev/images/dia_images/activity.png" width="50" height="30" style="border:0px"/></a>
        			<div style="text-align:center;">activity /</br> process</div>
        		</div>

        		<div style="float:right; margin-right:20px">
        			<a href="#" onclick="addElement(2)" ><img src="/proddev/images/dia_images/decision.png" width="50" height="30" style="border:0px"/></a>
        			<div style="text-align:center;">decision</div>
        		</div>
            	<div style="clear:both"></div>
        	</div>

            <div style="margin-top:10px; font-size:x-small;">
            	<div style="float:left; margin-left:20px">
        			<a href="#" onclick="addElement(3)"><img src="/proddev/images/dia_images/database.png" width="50" height="30" style="border:0px"/></a>
        			<div style="text-align:center;">database</div>
        		</div>

        		<div style="float:right; margin-right:20px">
        			<a href="#" onclick="addElement(4)"><img src="/proddev/images/dia_images/document.png" width="50" height="30" align="right" style="border:0px;"/></a>
        			<div style="text-align:center;">documents</div>
        		</div>
        		<div style="clear:both"></div>
        	</div>

            <div style="margin-top:10px; font-size:x-small;">
            	<div style="float:left; margin-left:20px">
        			<a href="#" onclick="addElement(4)"><img src="/proddev/images/dia_images/multiDocs.png" width="50" height="30" style="border:0px"/></a>
        			<div style="text-align:center;">multiple docs</div>
        		</div>

        		<div style="float:right; margin-right:20px">
        			<a href="#" onclick="addDashedJoint()"><img src="/proddev/images/dia_images/dashedConnector.png" width="50" height="30" align="right" style="border:0px;"/></a>
        			<div style="text-align:center;">dashed</div>
        		</div>
        		<div style="clear:both"></div>
        	</div>

            <div style="margin-top:10px; font-size:x-small;">
            	<div style="float:left; margin-left:20px">
        			<a href="#" onclick="addJoint()"><img src="/proddev/images/dia_images/connector.png" width="50" height="30" style="border:0px"/></a>
        			<div style="text-align:center;">joint</div>
        		</div>

            	<div style="float:right; margin-right:20px">
        			 <a href="#" onclick="addLabeledJoint()"><img src="/proddev/images/dia_images/labeledConnector.png" width="50" height="30" align="right" style="border:0px"/></a>
        			<div style="text-align:center;">labeled joint</div>
        		</div>
        		<div style="clear:both"></div>
           </div>
           <div style="clear:both"></div>
        </div>

        <div style="margin-top:5px; margin-bottom:5px; text-align:center;">
			<button id="removeElement" name="removeElement" onclick="remove()" style="width:120px; font-size:x-small;">Remove element</button>
        </div>
		<%} %>
		<div align="center">
	        <div id="properties" style="background-color:#F0F0F6; padding: 0.5%; -moz-border-radius: 5px; border: 1px solid #DBDBDB;">
	            <div style="text-align:center; font-family:verdana; font-weight:bold; background-color:#b8b8b8">
	            	Object Properties
	            </div>
				<div class="uselessDetails" style="display:none">
	            <p>id: <input id="identifier" type="text"/></p>
	
	            <p>
	                x: <input id="x" type="text" size="2">
	                y: <input id="y" type="text" size="2">
	            </p>
				</div>
				
	            <div id="objectLabel" style="width:100%; font-size:x-small; margin-top:10px; float:left; ">
	            	<div style="width: 100%; text-align:left; color:#555555; margin-left:2px">
						<b>Object label:</b>
					</div>
					<%if(currentRole.equals("Project Manager")){%>
						<input class="regInput" type="text" id="label" style="margin-top:5px; width:100%"/>
					<%}else{ %>
						<input class="regInputDisabled" type="text" id="label" disabled="disabled" style="width:100%; margin-top:5px; font-weight:bold;"/>
					<%} %>
	            </div>
	
	            <div id="activity" style="width:100%; font-size:x-small; margin-top:5px; float:left">
	            	<div style="width: 100%; text-align:left; color:#555555; margin-left:2px">
						<b>Activity:</b>
					</div>
					<%if(currentRole.equals("Project Manager")){ %>
						<input class="regInput" type="text" id="activityName" style="margin-top:5px; width:100%"/>
					<%}else{ %>
						<input class="regInputDisabled" type="text" id="activityName" disabled="disabled" style="margin-top:5px; width:100%; font-weight:bold"/>
					<%} %>
	            </div>
	
	            <div id="timeline" style="width:100%; font-size:x-small; margin-top:5px; float:left">
	            	<div style="width: 100%; text-align:left; color:#555555; margin-left:2px">
						<b>Timeline:</b>
					</div>
					<%if(currentRole.equals("Project Manager")){ %>
						<input class="regInput" type="text" id="activityStartDate" style="width:40%; margin-top:5px; float:left;"/>
						<input class="regInput" type="text" id="activityEndDate" style="width:40%; margin-top:5px; float:right;"/>
						<div style="clear:both"></div>
					<%}else{ %>
						<input class="regInputDisabled" type="text" id="activityStartDate" disabled="disabled" style="width:40%; margin-top:5px; float:left;"/>
						<input class="regInputDisabled" type="text" id="activityEndDate" disabled="disabled" style="width:40%; margin-top:5px; float:right;"/>
						<div style="clear:both"></div>
					<%} %>
	            </div>
	
	            <div id="responsible" style="width:100%; font-size:x-small; margin-top:5px; float:left">
	            	<div style="width: 100%; text-align:left; color:#555555; margin-left:2px">
						<b>Responsible:</b>
					</div>
					<%if(currentRole.equals("Project Manager")){ %>
						<select class="regInput" id="activityResponsible" size="1" style="width:100%; margin-top:5px;">
							<option SELECTED>-responsible-</option>
							<option value="All roles">All roles</option>
							<%for(int i=0; i<rolesOnProject.size(); i++){
								Roles role = (Roles)rolesOnProject.get(i);%>
								<option value="<%=role.getRole()%>"><%=role.getRole()%></option>
							<%}%>
						</select>
					<%}else{ %>
						<input class="regInputDisabled" type="text" id="activityResponsible" disabled="disabled" style="width:100%; margin-top:5px; font-weight:bold">
					<%} %>
	            </div>
	
	            <div id="approver" style="width:100%; font-size:x-small; margin-top:5px; float:left">
	            	<div style="width: 100%; text-align:left; color:#555555; margin-left:2px">
						<b>Approver:</b>
					</div>
					<%if(currentRole.equals("Project Manager")){ %>
						<select class="regInput" id="activityApprover" size="1" style="width:100%; margin-top:5px;">
							<option SELECTED>-approver-</option>
							<%for(int i=0; i<rolesOnProject.size(); i++){
								Roles role = (Roles)rolesOnProject.get(i);%>
								<option value="<%=role.getRole()%>"><%=role.getRole()%></option>
							<%}%>
						</select>
					<%}else{ %>
						<input class="regInputDisabled" type="text" id="activityApprover" disabled="disabled" style="width:100%; margin-top:5px; font-weight:bold">
					<%} %>
	            </div>
	
	            <div id="devPhase" style="width:100%; font-size:x-small; margin-top:5px; float:left;">
	            	<div style="width:100%; text-align:left; color:#555555; margin-left:2px" >
	            		<b>Design phase:</b>
	            	</div>
	            	<%if(currentRole.equals("Project Manager")){ %>
		            	<select class="regInput" id="selDesignPhase" size="1" style="width:100%; margin-top:5px;">
		            		<option SELECTED >-design phase-</option>
		            		<option value="Analysis Stage">Analysis Stage</option>
		            		<option value="Design Constraints">Design Constraints</option>
		            		<option value="Product Planning">Product Planning</option>
		            		<option value="Concept Development">Concept Development</option>
		            		<option value="Concept Enhancement">Concept Enhancement</option>
		            		<option value="Concept Validation">Concept Validation</option>
		            	</select>
		            <%}else{ %>
						<input class="regInputDisabled" type="text" id="selDesignPhase" disabled="disabled" style="width:100%; margin-top:5px; font-weight:bold">
					<%} %>
	            </div>
	            
	            <div id="toolDiv" style="width:100%; font-size:x-small; margin-top:5px; float:left;">
	            	<div style="width:100%; text-align:left; color:#555555; margin-left:2px">
	            		<b>Tool:</b>
	            	</div>
	            	<%if(currentRole.equals("Project Manager")){ %>
		            	<select class="regInput" id="selTool" size="1"  onchange="populateTool(); this.size=1" style="width:100%; margin-top:5px;" onfocus="this.size=6" onblur="this.size=1">
		            		<option SELECTED>-select tool-</option>
		            		<option value="manager=dataAccessManager~method=0~content/project/devTools/workspace/competitors/caPage.jsp">Competitor's Analysis</option>
		            		<option value="manager=dataAccessManager~method=27~content/project/devTools/workspace/concepts/conceptSelection.jsp">Concept Selection</option>
		            		<option value="manager=dataAccessManager~method=34~content/project/devTools/workspace/correlations/correlationMatrix.jsp">Correlation Matrix</option>
		            		<option value="manager=dataAccessManager~method=20~content/project/devTools/workspace/designElements/designElementsDefinition.jsp">Design Elements</option>
		            		<option value="manager=dataAccessManager~method=40~content/project/devTools/workspace/dfX/designForX.jsp">Design for X</option>
		            		<option value="manager=dataAccessManager~method=18~content/project/devTools/workspace/functions/functionIdentification.jsp">Functions Identification</option>
		            		<option value="manager=dataAccessManager~method=7~content/project/devTools/workspace/needReqs/needsRequirements.jsp">Needs and Requirements</option>
		            		<option value="manager=dataAccessManager~method=15~content/project/devTools/workspace/prioritization/ahpPage.jsp">Prioritization Technique</option>		            		
		            		<option value="manager=dataAccessManager~method=4~content/project/devTools/workspace/stakeholders/shIdentification.jsp">Stakeholder Identification</option>
		            		<option value="manager=dataAccessManager~method=1~content/project/devTools/workspace/competitors/swotPage.jsp">SWOT Analysis</option>		            		
		            		<option value="manager=dataAccessManager~method=19~content/project/devTools/workspace/cTQs/technicalChars.jsp">Technical Characteristics</option>
		            		<option value="manager=dataAccessManager~method=17~content/project/devTools/workspace/needReqs/voctPage.jsp">Voice of Customer</option>		            		
		            		<option value="manager=dataAccessManager~method=50~content/project/devTools/workspace/externalTools/externalTool.jsp">External Tool</option>
		            	</select>
		            <%}else{ %>
		            	<input class="regInputDisabled" type="text" id="selTool" disabled="disabled" style="width:100%; margin-top:5px; font-weight:bold;">
		            <%} %>
	            </div>
	            
	            <div id="linkDiv" style="width:100%; font-size:x-small; margin-top:5px; float:left">
	            	<div style="width:100%; text-align:left; color:#555555; margin-left:2px">
	            		<b>Link to res:</b>
	            	</div>
	            	<input class="regInput" id="filePath" onchange="getPath(this.value)" type="text" style="width:100%; margin-top:5px;">
	            	<input type="hidden" id="filePathReal"/> 
	            </div>
	
	            <div style="clear:both"></div>
	        </div>
	        <%if(currentRole.equals("Project Manager")){ %>
	        <div id="saving" style="margin-top:5px; "> 	
	        	<button id="saveDia" name="saveDia" onclick="saveDia()" style="width:100%; font-size:x-small; font-weight:bold; margin-top:5px;">Save Diagram</button>
	        	<button id="updateDia" name="updateDia" onclick="updateDia()" style="width:100%; font-size:x-small; font-weight:bold; margin-top:5px;">Update Diagram</button>
	        </div>
	        <div style="clear:both"></div>
	        <%} %>
	        
	        <div id="goToButtons" style="margin-top:5px">
	        	<button id="goToActivities" name="goToActivities" onclick="goToActivities()" style="width:100%; font-size:x-small; font-weight:bold; margin-top:5px">Go to activities</button>
	        </div>
	        <div style="clear:both"></div>
	        <form name="goToForm" method="post" action="/proddev/controller">
	        	<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.DATA_ACCESS_MANAGER%>"/>
				<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=DataAccessConstants.ACTIVITIES%>"/>
	        </form>
	    </div>
    </div>

    <div id="rightPane" style="width:auto; height: 750px; overflow:auto;border:1px solid #00FF00;">
        <div id="paper" style="margin-left:5px;float:left;"></div>
    </div>

	<div style="clear:both"></div>
</div>
<div style="clear:both"></div>